/*
                              .                       .
,-,-. ," . , , ,-.    ,-. . . |-. ,-. ,-. ,-. . . ,-. | ,
| | | |- |/|/  `-. -- |   | | | | |-' |   | | | | | | |<
' ' ' |  ' '   `-'    `-' `-| ^-' `-' '   |-' `-^ ' ' ' `
      '                    /|             |
                          `-'             '
mfws-cyberpunk

- Mobile first screen sizes.
- Eighty column rule.
- Upper-case for 3-char hex.
- Lower-case for 6-char hex.
- Space after semi-colon if preceding a letter.
- Space after a colon.
- Only define classes when necessary.
- Media queries last.

*/


@import "variables";


body {
    margin: 1rem auto;
    padding: 0 3.2%;
    width: 93.6%;
    max-width: 1024px;
    font-family: sans-serif;
    line-height: 1.4;
    color: $bodyColorA;
    background: $bodyColorB;
}


a {color: #aaaaff;}
a:visited {color: #ca8aff;}
a:hover {color: #FCF;}
a:active {color: #FFF;}
:focus {border: 1px solid #ff00ff;}


h1, h2, h3, h4, h5, h6, h7 {
    font-family: monospace;
    font-size: x-large;
    margin: 20px 0 10px 0;
}
h1, .title {color: $headingColor1}
h2 {color: $headingColor2;}
h3 {color: $headingColor3;}
h4 {color: $headingColor4;}
h5 {color: $headingColor5;}
h6 {color: $headingColor6;}
h7 {color: $headingColor7;}


img {max-width: 100%;}


pre {white-space: pre;}
pre.src {
    background-color: #000;
    color: #0F0;
    font-family: monospace;
}
blockquote {
    background: #328;
    color: #CCC;
    font-family: serif;
}


table {
    background-color: $tableColorA;
    color: $tableColorB1;
    margin: 10px 0 20px 0;
}
tr:nth-child(even) {
    background-color: $tableColorB2;
    color: $tableColorA;
}


img.art {
    margin: 0px auto;
    display: block;
    max-height: 480px;
}


.hash {font-family: monospace;}


.todo {
    color: #ff9c00;
    border: 1px solid #ff9c00;
    padding: 0 5px;
}


.done {
    color: violet;
    border: 1px solid violet;
    padding: 0 5px;
}


@media only screen and (min-width: 640px) {
    body {
        min-width: 600px;
        width: 80%;
        padding: 0 10px;
    }
}
